Mobile website/css
חשבתי אולי יש כאן כמה שיוכלו לעזור לי..
אני בונה עכשיו אתר Mobile לאתר שקיים.
בסימולטורים השונים (iPhone 4, 3GS, Galaxy, iPad) - האתר נראה טוב והכל עובד כשורה, אבל כשאני מנסה להיכנס מהאייפון שלי/של חבר.. זה כביכול לא מזהה את ה- CSS.
ניסיתי להכניס את ה- CSS בתוך הקובץ עצמו, ניסיתי לשנות את הmedia properties, שיחקתי עם ה- viewport.
יש למישהו רעיונות?
תודה :)
7 תשובות
ענה
למה הכוונה? לפי איך שאני רואה את זה, הבעיה היא עם ה-media queries, אבל אף פעם אי אפשר לדעת. אולי תדביק כאן חלק קטן מהקוד?
ענה
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<meta name="viewport" content="width=100%; initial-scale=1; minimum-scale=1; maximum-scale=1;" />
<meta name="viewport" content="target-densitydpi=device-dpi" />
<meta name="Cache-Control" content="no-cache" />
<meta name="apple-touch-fullscreen" content="yes" />
<title> Football (soccer) highlights, goals, videos & clips | 101 Great Goals </title>
<link rel="stylesheet" href="http://www.101greatgoals.com/wp-content/themes/tutorial/css/mobile.css" type="text/css" media="all" />
<style type="text/css" >
.clockIcon {
width: 14px;
height: 14px;
clear: both;
float: left;
padding-right: 3px;
}
</style>
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
</head>
<body>
<div id="wrapper">
<div id="header">
והקובץ CSS:
margin: 0;
padding: 0;
height:100%;
-ms-text-size-adjust:none;
-webkit-text-size-adjust: none;
background: #fff;
}
* {
margin: 0;
padding: 0;
font-family: Arial, Helvetica, sans-serif;
}
#wrapper {
margin: 0;
padding: 0;
}
#header {
width: 100%;
background: url('/wp-content/themes/tutorial/images/header-bg-m.jpg') repeat-x;
height: 60px;
margin: 0;
padding:0;
}
.boxStuff {
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
margin-top: -10px;
padding-left: 10px;
background-color: #214583;
clear: both;
}
h2 {
font: normal 16px Arial, Helvetica, sans-serif;
margin: 0;
padding:0;
border-bottom: none;
border:0!important;
line-height:28px!important;
color: #fff;
font-weight: bold;
}
.videosBox {
margin: 0;
padding: 0;
}
ul {
margin: 0;
padding: 0;
}
img {
width: 100px;
float: left;
border: 0;
height: 76px;
}
a {
font-size: 13px;
color:#191919;
text-decoration:none;
margin-top: 10px;
vertical-align: middle;
}
li {
line-height: 0px;
list-style-type: none;
margin: 0;
padding: 0;
width: auto;
clear: both;
border-bottom: 1px solid #edede7;
font-size: 11px;
color: #c9c9c9;
}
.textImg {
width: 200px;
word-wrap:break-word;
margin: 0;
padding: 5px;
line-height: 20px;
float: left;
claer: both;
}
.blogPosts {
margin: 0;
padding: 0;
}
.picturesBox {
margin: 0;
padding: 0;
}
.otherSports {
margin: 0;
padding: 0;
}
iframe {
width: 100px;
float: left;
}
.readmore {
float: right;
width: 100%;
clear: both;
text-align: right;
padding-right: 4px;
}
.readmore a{
font-weight: bold;
font-size: 13px;
color: #404044;
}
לא רואה שום סיבה שזה יקרה. אין אפילו שאילתת מדיה אחת (חוץ מזה שזה נועד לכל המכשירים). אולי מישהו אחר יוכל לעזור לך...
שאר קוד ה-XHTML שלך תקני?
ענה
יכול להיות שהשרת שמחזיר את קובץ ה-CSS חוסם אותו לגישה ממובייל דיבייסים?
אם הכל עולה בדפדפן, זה אומר שזה אמור לעלות גם בדפדפן מובייל וכתובות נכונות והכל בסדר.
אני כבר מתעסק בזה יומיים ואני לא מצליח למצוא שום תשובה,
Light - אפילו בדקתי גם את זה, עשיתי תקינות לקוד הXHTML וה- CSS בValidator של W3C, והכל נמצא תקין.
אלכס - גם אני חשבתי כך, אז בגלל זה העברתי את זה למסמך עצמו.. ועדיין - לא עובד.
מה שמצחיק זה, שבסימולטורים שונים שבהם ניתן להציג את המסמך כ- iPhone 3GS.. הכל עובד מצויין, אבל בפלאפון שלי (iPhone 4) לא מציג שום הגדרת CSS.
למרות שבדקתי... ושיניתי את הכל לצבע אדום.. ועבד הכל שונה. אבל רקע, שינוי פונט, וכו' - לא מציג.
טוב חבר'ה,
תודה רבה על העזרה =)
עליתי על הבעיה... האתר שאני עובד איתו מלא ב- Caching (מתחיל מ- Memcache ונגמר ב23,000 סוגי Caching שונים).